<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片跟随</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        body{
            text-align: center;
        }

        #small{
            margin-top: 150px;
        }

        #showBig{
            position: absolute;
            display: none;
        }
    </style>


    <script>
        $(function () {
            $("#small").bind("mouseover mouseout mousemove" , function (event){
                //如果鼠标划上去,就显示大图的内容
                if(event.type == 'mouseover'){
                    $("#showBig").show();
                }else if(event.type == 'mouseout'){
                    $("#showBig").hide();
                }else{
                    console.log(event)
                    $("#showBig").offset({
                        left : event.pageX + 10,
                        top : event.pageY + 10
                    });
                }
            })
        })
    </script>
</head>
<body>
<img src="../../imgs/1.jpg" alt="" id="small" style="width: 150px;">
<div id="showBig">
    <img src="../../imgs/1.jpg" alt="">
</div>
</body>
</html>